<template>
	<view class="detail-container">
		<!-- 标题 -->
		<view class="detail-header">
			<text class="detail-title">{{ detail.title }}</text>
			<view class="detail-meta">
				<view class="meta-left">
					<text class="meta-item">{{ formatDate(detail.publish_time) }}</text>
					<text class="meta-item">{{ detail.sender_name }}</text>
				</view>
				<view class="meta-right" v-if="type === 'consultation' && detail.message_type">
					<text class="meta-type">{{ getNewsTypeLabel(detail.message_type) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="detail-content">
			<rich-text :nodes="formatContent(detail.content)"></rich-text>
		</view>
		
		<!-- 底部信息 -->
		<view class="detail-footer" v-if="detail.valid_until">
			<text class="footer-text">有效期至: {{ formatDate(detail.valid_until) }}</text>
		</view>
	</view>
</template>

<script>
import { getAnnouncementDetail, getConsultationDetail, getMessageDetail } from '@/api/notifications.js';

export default {
	data() {
		return {
			id: null,
			type: '', // announcement, consultation, message
			detail: {
				title: '',
				content: '',
				publish_time: '',
				valid_from: '',
				valid_until: '',
				sender_name: ''
			},
			loading: false
		}
	},
	onLoad(options) {
		this.id = options.id;
		this.type = options.type || 'announcement';
		
		// 根据类型设置页面标题
		let pageTitle = '详情';
		if (this.type === 'announcement') {
			pageTitle = '公告详情';
		} else if (this.type === 'consultation') {
			pageTitle = '资讯详情';
		} else if (this.type === 'message') {
			pageTitle = '消息详情';
		}
		uni.setNavigationBarTitle({
			title: pageTitle
		});
		
		this.loadDetail();
	},
	methods: {
		// 加载详情
		async loadDetail() {
			if (!this.id) {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
				return;
			}
			
			this.loading = true;
			try {
				// 统一使用通用的消息详情API
				const res = await getMessageDetail(this.id);
				
				// 检查响应中的code字段
				if (res && res.code === 200 && res.data) {
					this.detail = res.data;
				} else {
					uni.showToast({
						title: res?.message || '获取详情失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载详情出错:', error);
				// 处理404错误，显示更友好的提示
				if (error?.status === 404) {
					let resourceType = this.type === 'announcement' ? '公告' : 
					                   this.type === 'consultation' ? '资讯' : '消息';
					uni.showToast({
						title: `${resourceType}不存在或已被删除`,
						icon: 'none',
						duration: 2000
					});
					
					// 2秒后返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				} else {
					uni.showToast({
						title: error?.detail || '网络错误，请稍后重试',
						icon: 'none'
					});
				}
			} finally {
				this.loading = false;
			}
		},
		
		// 格式化日期
		formatDate(dateString) {
			if (!dateString) return '';
			
			const date = new Date(dateString);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		// 格式化内容，处理换行符等
		formatContent(content) {
			if (!content) return '';
			
			// 将换行符转换为<br>标签
			return content.replace(/\n/g, '<br>');
		},
		
		// 获取新闻类型标签
		getNewsTypeLabel(type) {
			const typeLabels = {
				'园区资讯': '园区',
				'新闻资讯': '新闻',
				'活动推广': '活动'
			};
			return typeLabels[type] || type || '资讯';
		}
	}
}
</script>

<style>
.detail-container {
	background-color: #FFFFFF;
	min-height: 100vh;
	padding: 30rpx;
}

.detail-header {
	margin-bottom: 40rpx;
	border-bottom: 1px solid #EEEEEE;
	padding-bottom: 30rpx;
}

.detail-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20rpx;
	display: block;
}

.detail-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26rpx;
	color: #999999;
}

.meta-left {
	display: flex;
	align-items: center;
}

.meta-item {
	margin-right: 20rpx;
}

.meta-right {
	display: flex;
	align-items: center;
}

.meta-type {
	background-color: #007AFF;
	color: #FFFFFF;
	padding: 2rpx 8rpx;
	border-radius: 4rpx;
	font-size: 20rpx;
}

.detail-content {
	font-size: 30rpx;
	color: #333333;
	line-height: 1.8;
	padding-bottom: 40rpx;
}

.detail-footer {
	border-top: 1px solid #EEEEEE;
	padding-top: 30rpx;
	font-size: 26rpx;
	color: #999999;
	text-align: right;
}
</style> 